<template>
  <t-row :gutter="16" class="row-container">
    <t-col :xs="12" :xl="12">
      <t-card :title="$t('pages.dashboardBase.rankList.title')" class="dashboard-rank-card" :bordered="false">
        <template #actions>
           <t-link @click="openDoc()">查看所有文档</t-link>
        </template>
        <t-table :data="posts" :columns="COLUMNS" row-key="id" zIndex="1">
          <template #title="slotProps">
            <t-link theme="primary" @click="openEdit(slotProps.row.id)">{{
              slotProps.row.title
            }}</t-link>
          </template>
        </t-table>
      </t-card>
    </t-col>

  </t-row>
</template>

<script setup lang="ts">
import type { TdBaseTableProps } from 'tdesign-vue-next';
import {useRouter} from 'vue-router'
import { t } from '@/locales';
import {getAllPosts,getPublishList} from '@/api/posts'
import {ref, onMounted } from 'vue';



const COLUMNS: TdBaseTableProps['columns'] = [
  // {
  //   align: 'center',
  //   colKey: 'index',
  //   title: t('pages.dashboardBase.saleColumns.index'),
  //   width: 70,
  //   fixed: 'left',
  // },
  {
    align: 'left',
    ellipsis: true,
    colKey: 'title',
    title: '标题',
    width: 150,
  },
  {
    align: 'center',
    colKey: 'created_at',
    width: 70,
    title: '创建日期',
  },
  {
    align: 'center',
    colKey: 'updated_at',
    title: '更新日期',
    width: 70,
  },

];

const router=useRouter();
const openEdit=(id:any)=>{

  router.push({
    name:'postsEdit',
    params:{id:id}
  })
}
const posts=ref([])
const fetchData=()=>{
  getPublishList({
    current:1,
    pageSize:10
  })
  .then(ret=>{
     posts.value=ret.items;
  })
}
const openDoc=()=>{
  router.push('/posts/list')
}

onMounted(()=>{
  fetchData()
})
</script>

<style lang="less" scoped>
.dashboard-rank-card {
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);

  :deep(.t-card__header) {
    padding: 0;
  }

  :deep(.t-card__title) {
    font: var(--td-font-title-large);
    font-weight: 400;
  }

  :deep(.t-card__body) {
    padding: 0;
    margin-top: var(--td-comp-margin-xxl);
  }
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: var(--td-gray-color-5);
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: var(--td-brand-color);
  }
}
</style>
